extends layout
//- 水平列表, 用 CSS
block content
    style.
        ul {
            list-style-type: none;  /* 去掉前面的标志 */
            margin: 0;  /* 默认还有一些 margin 和 padding */
            padding: 0;
            overflow: hidden;  /* 超出部分隐藏起来, 在这里是 本来四个元素 float 不能占满一行, overflow 后可以填充右边 */
            background-color: #333333;
        }
        li { float: left; }
        li a {
            display: block;  /* block 是新开一行 和 上下左右一样的 padding margin, 但上面有了 float, 所以没有新开一行 */
            color: white;
            text-align: center;
            padding: 16px;  /* 16px 很合适, 默认只是左右, 因为有 block, 所以上下也 16px 了 */
            text-decoration: none;  /* 去掉链接的下划线 */
        }
        li a:hover { background-color: #111111; }
    ul
        li
            a(href="#home") Home
        li
            a(href="#news") News
        li
            a(href="#contact") Contact
        li
            a(href="#about") About
